<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue路由</title>
</head>
<body>
<div id="app">

    <h1>{{msg}}</h1>
    <router-view></router-view>
<!--    通过使用标签直接切换-->
    <router-link to="/users">用户管理link</router-link>
    <router-link to="/emps">员工管理link</router-link>
    <a href="#/users">用户管理</a>
    <a href="#/emps">员工管理</a>
<!--    通过js代码切换路由-->
    <button @click="test">测试切换路由</button>
    <!--    使用router-link 用来替换a标签实现路由转换,好处就是书写路径的时候不需要加#  tag属性就是渲染link标签的样子默认为a标签-->
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
<script src="../js/axios.min.js"></script>
<script>

    const users = {
        template: "<div><h3>用户管理</h3></div>"
    };
    const emps = {
        template: "<div><h3>员工管理</h3></div>"
    };

    //创建路由对象并定义路由规则
    const router = new VueRouter({
        routes: [
            {path: '/', redirect: 'emps'},//默认路由规则  redirect:路由的重定向
            {path: '/users',name:"users" ,component: users}, //path指定路径  component指定组件  name路由名称必须唯一
            {path: '/emps',name:"emps" ,component: emps}
        ],

    });
    const app = new Vue({
        el: "#app",
        data: {
            msg: "动态路由的使用"
        },
        methods: {
            test(){
                console.log("test");
                // this.$router.push("/users")//根据路径
                this.$router.push({name:"emps"})//根据名称[推荐]
            }
        },
        computed: {},
        components: {},
        router,
    })
</script>
